<html>
    <head>
        <title>完整示例</title>
    </head>
    <body>
        <script>
            // 2、完整示例
                                // 有了这些知识，我们现在可以完成我们最开始响实现的组件
                                 
                                var getChildrenTextContent = funciton(children){
                                    return children.map(function(node){
                                        return node.children? getChildrenTextContent(node.children):node.text
                                    }).join('')
                                }

                                Vue.component('anchored-heading',{
                                    render:function(createElement){
                                        // 创建 kebab-case 风格的ID
                                        var headingId = getChildrenTextContent(this.$slots.default)
                                            .toLowerCase()
                                            .replace(/\W+/g, '-')
                                            .replace(/(^-|-$)/g, '')

                                        return createElement(
                                            'h'+this.level, // 元素标签名称
                                            [
                                                createElement('a',{
                                                    attrs:{
                                                        name:headingId,
                                                        href:'#'+headingId
                                                    }
                                                },this.$slots.default)
                                            ]
                                        )
                                    },
                                    // 组件属性声明
                                    props:{
                                        level:{
                                            type:Number,
                                            required:true
                                        }
                                    }
                                });
        </script>
    </body>
</html>